<template>
  <el-menu
    router
    :default-active.sync="activeLink"
    :mode="mode"
    @select="goto"
    :collapse="isCollapse"
    :unique-opened="true"
    background-color="transparent"
    class="main-navigation-menu"
    :class="{ 'nav-collapsed': isCollapse }"
  >
    <div class="el-menu-item-group__title" style="padding-top: 4px;">
      <span>Apps</span>
    </div>
    <div v-if="isAdmin">
      <el-menu-item index="/users">
        <i class="mdi mdi-account-multiple-outline"></i>
        <span slot="title">用户管理</span>
      </el-menu-item>
      <div class="el-menu-item-group__title">
        <span>Setting</span>
      </div>
      <el-submenu index="1" popper-class="main-navigation-submenu">
        <template slot="title">
          <i class="mdi mdi-settings-outline"></i>
          <span>设置</span>
        </template>
        <el-menu-item index="/building">
          <i class="mdi mdi-office-building"></i>
          <span slot="title">场所</span>
        </el-menu-item>
        <el-menu-item index="/facility">
          <i class="mdi mdi-bulletin-board"></i>
          <span slot="title">设施</span>
        </el-menu-item>
        <el-menu-item index="/meetingroom">
          <i class="mdi mdi-floor-plan"></i>
          <span slot="title">会议室</span>
        </el-menu-item>

        <el-menu-item index="/profile">
          <i class="mdi mdi-account-details"></i>
          <span slot="title">用户信息</span>
        </el-menu-item>
        <el-menu-item index="/change-password">
          <i class="mdi mdi-key-variant"></i>
          <span slot="title">修改密码</span>
        </el-menu-item>
      </el-submenu>
      <div class="el-menu-item-group__title" style="padding-top: 4px;">
        <span>Report</span>
      </div>
      <el-submenu index="2" popper-class="main-navigation-submenu">
        <template slot="title">
          <i class="mdi mdi-google-analytics"></i>
          <span>报表</span>
        </template>
        <el-menu-item index="/stat">
          <i class="mdi mdi-finance"></i>
          <span slot="title">按照会议室统计</span>
        </el-menu-item>
      </el-submenu>
    </div>
    <div v-else>
      <el-menu-item index="/booking">
        <i class="mdi mdi-google-classroom"></i>
        <span slot="title">会议室预定</span>
      </el-menu-item>

      <div class="el-menu-item-group__title">
        <span>Setting</span>
      </div>
      <el-submenu index="1" popper-class="main-navigation-submenu">
        <template slot="title">
          <i class="mdi mdi-settings-outline"></i>
          <span>设置</span>
        </template>
        <el-menu-item index="/profile">
          <i class="mdi mdi-account-details"></i>
          <span slot="title">用户信息</span>
        </el-menu-item>
        <el-menu-item index="/change-password">
          <i class="mdi mdi-key-variant"></i>
          <span slot="title">修改密码</span>
        </el-menu-item>
      </el-submenu>
      <div class="el-menu-item-group__title" style="padding-top: 4px;">
        <span>Report</span>
      </div>
      <el-submenu index="2" popper-class="main-navigation-submenu">
        <template slot="title">
          <i class="mdi mdi-google-analytics"></i>
          <span>报表</span>
        </template>
        <el-menu-item index="/stat">
          <i class="mdi mdi-finance"></i>
          <span slot="title">按照会议室统计</span>
        </el-menu-item>
      </el-submenu>
    </div>
  </el-menu>
</template>

<script>
import { detect } from "detect-browser";
const browser = detect();
import store from "../store/";

export default {
  name: "Nav",
  props: ["mode", "isCollapse"],
  data() {
    return {
      isIe: true,
      isEdge: true,
      activeLink: null,
    };
  },
  computed: {
    isAdmin: function() {
      return store.getters.isInRole(["Admin"]);
    },
  },
  methods: {
    goto(index, indexPath) {
      if (index.charAt(0) === "/") {
        this.$emit("push-page", { page: index });
      }
    },
    setLink(path) {
      this.activeLink = path;
    },
  },
  created() {
    if (browser.name !== "ie") this.isIe = false;
    if (browser.name !== "edge") this.isEdge = false;

    this.setLink(this.$router.currentRoute.path);
    this.$router.afterEach((to, from) => {
      this.setLink(this.$router.currentRoute.path);
    });
  },
  mounted() {
    //console.log('nav component mounted')
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/_variables";

.el-menu {
  border: none;
}
.el-menu::before,
.el-menu::after {
  display: none;
}
.el-submenu,
.el-menu-item {
  font-size: 12px;

  .mdi {
    vertical-align: middle;
    margin-right: 5px;
    display: inline-block;
    width: 24px;
    text-align: center;
    font-size: 18px;
  }
}
</style>

<style lang="scss">
@import "../assets/scss/_variables";

.main-navigation-menu {
  transition: width 0.5s;

  &:not(.el-menu--collapse) {
    .el-submenu__title,
    .el-menu-item {
      height: 40px;
      line-height: 40px;
      background-color: transparent !important;
    }

    &:not(.el-menu--horizontal) {
      .el-menu-item,
      .el-submenu {
        position: relative;

        &::before {
          content: "";
          display: block;
          width: 0px;
          height: 1px;
          position: absolute;
          bottom: 10px;
          left: 30px;
          background: $text-color;
          z-index: 1;
          opacity: 0;
          transition: all 0.7s cubic-bezier(0.55, 0, 0.1, 1);
        }
        &:hover {
          &::before {
            width: 100px;
            opacity: 1;
            //left: 50px;
            transform: translate(20px, 0);
          }
        }

        &.is-active {
          &::before {
            background: $text-color-accent;
          }
        }
      }
    }

    .el-submenu.is-opened {
      //background: #edf1f6 !important;
      //background: rgba(223, 228, 234, 0.38) !important;
      position: relative;

      &::after {
        content: "";
        display: block;
        width: 2px;
        position: absolute;
        top: 40px;
        bottom: 10px;
        left: 31px;
        background: $text-color;
        z-index: 1;
      }

      &::before {
        display: none;
      }

      .el-menu-item,
      .el-submenu {
        &::before,
        &::after {
          display: none;
        }
      }
    }

    .el-menu-item-group__title {
      padding: 15px 0 0px 20px;
      color: transparentize($text-color, 0.65);
    }
  }

  .el-submenu__title,
  .el-menu-item:not(.is-active) {
    color: $text-color;

    i {
      color: $text-color;
    }
  }

  &.el-menu--collapse {
    .el-menu-item-group__title {
      padding: 15px 0 0px 0px;
      width: 100%;
      text-align: center;
    }

    .el-submenu__title:hover,
    .el-menu-item:hover {
      background-color: rgba(0, 0, 0, 0.05) !important;
    }
  }

  &.el-menu--horizontal {
    white-space: nowrap;
    /*width: fit-content;
		width: max-content;*/
    overflow: hidden;
    display: table;

    & > * {
      float: inherit !important;
      display: inline-block;
    }
  }

  &.nav-collapsed {
    .el-menu-item,
    .el-submenu__title {
      & > span {
        display: none;
      }
    }
  }
}

.main-navigation-submenu {
  .el-menu {
    background: #fff !important;

    .el-menu-item:not(.is-active) {
      color: $text-color;
    }
    .el-menu-item:hover {
      background-color: transparentize($background-color, 0.3) !important;
    }
  }
}
</style>
